<template>
  <!-- 外层容器 -->
  <div class="star-game-container">
    <!-- 背景层 -->
    <div class="background-image"></div>
    
    <!-- 游戏内容层 -->
    <div class="star-game">
      <h1>消灭星星</h1>
      <div class="game-info">
        <div>分数: {{ score }}</div>
        <button @click="resetGame">重新开始</button>
      </div>
      <div class="game-board">

        
        <div 
          v-for="(row, rowIndex) in board" 
          :key="rowIndex" 
          class="row"
        >
          <div 
            v-for="(star, colIndex) in row" 
            :key="colIndex" 
            class="star"
            :class="`color-${star}`"
            @click="handleClick(rowIndex, colIndex)"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StarGame',
  data() {
    return {
      rows: 10,
      cols: 10,
      colors: 5, // 5种不同颜色的星星
      board: [],
      score: 0,
      selected: null
    }
  },
  created() {
    this.resetGame();
  },
  methods: {
    resetGame() {
      this.score = 0;
      this.generateBoard();
    },
    generateBoard() {
      this.board = Array.from({ length: this.rows }, () => 
        Array.from({ length: this.cols }, () => Math.floor(Math.random() * this.colors) + 1)
      );
    },
    handleClick(row, col) {
      if (this.board[row][col] === 0) return; // 已经消除的星星不能点击
      
      const color = this.board[row][col];
      const connected = this.findConnectedStars(row, col, color);
      
      if (connected.length < 2) return; // 至少需要2个相连的星星才能消除
      
      // 消除星星
      this.removeStars(connected);
      // 计算分数
      this.calculateScore(connected.length);
      // 星星掉落
      this.dropStars();
      // 检查游戏是否结束
      this.checkGameOver();
    },
    findConnectedStars(row, col, color, visited = new Set()) {
      const key = `${row},${col}`;
      if (
        row < 0 || row >= this.rows || 
        col < 0 || col >= this.cols ||
        this.board[row][col] !== color ||
        visited.has(key)
      ) {
        return [];
      }
      
      visited.add(key);
      let result = [[row, col]];
      
      // 检查上下左右的相邻星星
      const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
      for (const [dr, dc] of directions) {
        result = result.concat(this.findConnectedStars(row + dr, col + dc, color, visited));
      }
      
      return result;
    },
    removeStars(stars) {
      for (const [row, col] of stars) {
        this.board[row][col] = 0; // 0表示空位
      }
    },
    calculateScore(count) {
      // 分数计算规则：消除n个星星得n*(n-1)分
      this.score += count * (count - 1);
    },
    dropStars() {
      // 处理每一列
      for (let col = 0; col < this.cols; col++) {
        // 从下往上检查空位
        let emptyRow = this.rows - 1;
        
        for (let row = this.rows - 1; row >= 0; row--) {
          if (this.board[row][col] !== 0) {
            // 如果当前行不是空位，就把它移动到最下面的空位
            if (emptyRow !== row) {
              this.board[emptyRow][col] = this.board[row][col];
              this.board[row][col] = 0;
            }
            emptyRow--;
          }
        }
      }
      
      // 检查是否有完全空的列，如果有，右边的列向左移动
      let emptyCol = 0;
      for (let col = 0; col < this.cols; col++) {
        // 检查这一列是否全空
        const isEmpty = this.board.every(row => row[col] === 0);
        
        if (!isEmpty) {
          // 如果不是全空，就把它移动到最左边的空列
          if (emptyCol !== col) {
            for (let row = 0; row < this.rows; row++) {
              this.board[row][emptyCol] = this.board[row][col];
              this.board[row][col] = 0;
            }
          }
          emptyCol++;
        }
      }
    },
    checkGameOver() {
      // 检查是否还有可以消除的星星
      for (let row = 0; row < this.rows; row++) {
        for (let col = 0; col < this.cols; col++) {
          if (this.board[row][col] === 0) continue;
          
          const color = this.board[row][col];
          const directions = [[-1, 0], [1, 0], [0, -1], [0, 1]];
          
          for (const [dr, dc] of directions) {
            const newRow = row + dr;
            const newCol = col + dc;
            
            if (
              newRow >= 0 && newRow < this.rows &&
              newCol >= 0 && newCol < this.cols &&
              this.board[newRow][newCol] === color
            ) {
              return false; // 还有可以消除的星星
            }
          }
        }
      }
      
      // 如果没有可以消除的星星了，游戏结束
      alert(`游戏结束！你的得分是: ${this.score}`);
      return true;
    }
  }
}
</script>

<style scoped>
.star-game-container {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 确保背景覆盖整个视口 */
  overflow: hidden; /* 防止背景图片溢出 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/Users/apple/Desktop/game/src/assets/bg1.avif');
  background-size: cover; /* 图片自适应容器 */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; /* 透明度调整，避免影响游戏内容 */
  z-index: -1; /* 确保背景在内容下方 */
}

/* 游戏内容容器 */
.star-game-content {
  position: relative; /* 确保内容在背景上方 */
  padding: 20px;
  max-width: 500px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明背景，提高文字可读性 */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(128, 110, 110, 0.2);
}



.star-game {
  font-family: Arial, sans-serif;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.game-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
}

.game-board {
  display: inline-block;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  border: 2px solid #3b0303; /* 内环颜色 */
  box-shadow: 
    0 0 0 4px white,       /* 中间间隔色 */
    0 0 0 6px #8b0000;     /* 外环颜色 */
}

.row {
  display: flex;
}


.star {
  width: 40px;
  height: 40px;
  margin: 2px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

.star:hover {
  transform: scale(1.1);
}

/* 不同颜色的星星 */
.color-1 { background: linear-gradient(135deg, #FF5252, #FF8A80); } /* 红 */
.color-2 { background: linear-gradient(135deg, #4CAF50, #81C784); } /* 绿 */
.color-3 { background: linear-gradient(135deg, #2196F3, #64B5F6); } /* 蓝 */
.color-4 { background: linear-gradient(135deg, #FFD600, #FFEE58); } /* 黄 */
.color-5 { background: linear-gradient(135deg, #9C27B0, #BA68C8); } /* 紫 */


button {
  padding: 5px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #45a049;
}
</style>
